| Images and Animation |
|
Objectives |
| Discussion |
PictureBoxes
e-argument
| Demonstration |
In this demo we will display an image in a picture box, get the image to move to where we click, and then "drop" the image so that it "falls" off the form.
1. Add a new form to your project.
2. Add the following controls to your form: button (btnLoad), button (btnDrop), picturebox (pbBall), timer (timer1).
3. Either create an image in Paint or find an image on your computer (.bmp, .gif, etc). Put the image in a location that you know the path for. In this demo we will show the code for an image called ball.bmp which is on our C-drive so that the path is "C:\ball.bmp". Where ever you see "C:\ball.bmp" use your path and filename.
4. Add the following code to the click event for btnLoad:
Me.pbBall.Image = Image.FromFile("c:\ball.bmp")
5. Run your program and make sure that your image appears when you click the butotn.
6. Now we will get the image to move to the location on the form that we click the mouse. Go to the code window and choose "base class events" in the left drop-down box at the top of the form. In the right drop-down box choose the mousedown event. The code for this event should now appear in your code window. Inside this event, type "e.". You should see a list of items. At the bottom of the list should be x and y. The x and y properties give the coordinates of the location that we clicked. Type the following so that you can understand what e.x and e.y are telling you. For example, is x measured from the left side of the form or the right side? Is y measured from the top or bottom?
MessageBox.Show(e.X & " " & e.Y)
7. Run the program and click around the form. Notice that x is measured from the left and y is measured from the top.
8. Comment out the line you just entered and enter the following in this mousedown event:
pbBall.Top = e.Y
pbBall.Left = e.X
9. Run your program and click around the screen. Hopefully the image is moving to where you click.
10. Now we will animate the ball by making it move down the screen. In the click event for btnDrop add the following code to start the timer. Notice we can start it using the start method or by enabling it.
Timer1.Start()
11. Now inside the tick event for the timer add the following code. This code changes the top location of the ball everytime the timer ticks.
pbBall.Top = pbBall.Top + pbBall.Height
12. Run your program and experiment. Notice that the ball keeps falling even when its off the screen.
| Exercises |
1. Modify the program in the demo to stop the ball when it reaches the bottom of the form. You can add an if-statement to the timer tick event to determine the position of the ball relative to the form.
2. Experiment with the picturebox. Add a picturebox to a form. Experiment with the sizemode property. Check out the references in the Links & Help section below. Write a program that demonstrates what sizemode does. Add four radio buttons to your form. Each radio button should correspond to one of the sizemodes. Set the sizemode of the picturebox to normal. Load an image into the picturebox. When the user clicks a radio button the sizemode of the picturebox should be changed.
3. Modify the program in #1 so that the ball bounces back up when it reaches the bottom and then bounces off the top when it reaches the top of the form.
| Links & Help |